
// /养护基地
var vm = new Vue({
	el: '#app',
	data: function() {
		return {
			showModal: false,
			winWidth: 0,
			bigEquipmentArray: [], //大型设备数量
			materEquipmentArray: [], //重要物资数量

			dataCate: ['市政养护', '浦江桥隧', '城建养护'],
			dataList: [{
					value: 53,
					name: '市政养护'
				},
				{
					value: 25,
					name: '浦江桥隧'
				},
				{
					value: 10,
					name: '城建养护'
				}
			],
			dataCate2: [],
			dataList2: [],
			dataCate3: [],
			dataList3: []
		}
	},
	mounted: function() {
		this.$nextTick(function() {
			var that = this;
			mui.init({});
			mui.ready(function() {
                $.ajax({
                    url:"insertLog",
                    data:{"type":"base"},
                    type:"post",
                    dataType:"json",
                    success : function(){}
                });
				var commColor = ['#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#eb8146', '#626c91'];
				var myChart = echarts.init(document.getElementById('chart-base'));
				var myChart2 = echarts.init(document.getElementById('chart-base2'));
				var w = document.body.clientWidth;
				that.winWidth = w * .8;
				loading.show();
				$.getJSON('/define/getBaseEquipInfoChart', {}, function(res) {
					that.bigEquipmentArray = res.bigEquipmentArray;
					that.materEquipmentArray = res.materEquipmentArray;
					that.dataCate2 = res.equipmentSetName;
					that.dataList2 = res.equipmentDataList;
					// 指定图表的配置项和数据
					var option = {
						title: false,
						legend: {
							orient: 'horizontal',
							left: 'center',
							data: that.dataCate
						},
						series: [{
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							color: commColor,
							data: that.dataList,
							itemStyle: {
								normal: {
									label: {
										show: true,
										formatter: '{c}个' //名称:x% {b} :{d}%
									},
									labelLine: {
										show: true
									}
								},
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};
					var option2 = {
						title: false,
						legend: {
							orient: 'horizontal',
							left: 'center',
							data: that.dataCate2
						},
						series: [{
							type: 'pie',
							radius: '45%',
							center: ['50%', '60%'],
							color: commColor,
							data: that.dataList2,
							labelLine: {
								normal: {
									length: 5
								}
							},
							itemStyle: {
								normal: {
									label: {
										show: true,
										formatter: function(e){
											if(e.name=='车辆设备'){
												return e.value+'辆';
											}else{
												return e.value+'台/套';
											}
										}
									},
									labelLine: {
										show: true
									}
								},
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};

					myChart.setOption(option);
					myChart2.setOption(option2);
					loading.hide();
				})

				myChart2.on('click', function(param) {
                    var label = "";
                    if(param.name=='车辆设备')
                        label='辆';
                    else
                        label='台/套';
					loading.show();
					var name = param.name;
					$.getJSON('/define/getEquipSubType', {
						"equipm_type": name
					}, function(res) {
						that.dataCate3 = res.nameArray;
						that.dataList3 = res.dataList;

						var myChart3 = echarts.init(document.getElementById('chart-base3'));
						var option3 = {
							title: false,
							legend: {
								orient: 'horizontal',
								left: 'center',
								data: that.dataCate3
							},
							series: [{
								type: 'pie',
								radius: '45%',
								center: ['50%', '60%'],
								color: commColor,
                                labelLine: {
                                    normal: {
                                        length: 0
                                    }
                                },
								data: that.dataList3,
								itemStyle: {
									normal: {
										label: {
											show: true,
											formatter: '{c}'+label
										},
										labelLine: {
											show: true
										}
									},
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						};
						myChart3.setOption(option3);
						that.showModal = true;
						loading.hide();
					})
				});
			})
		});
	},
	methods: {
		getRandom: function() {
			var n = 1;
			var rnd = "";
			for(var i = 0; i < n; i++)
				rnd += Math.floor(Math.random() * 100);
			return rnd;
		},
		clseModal: function() {
			var that = this;
			that.showModal = false;
			that.dataCate3 = [];
			that.dataList3 = [];

		}
	}
})